<template>
  <div>
    <image class="bacImg" :src="relayData.settings.banner" alt="" mode="aspectFill"></image>
    <div class="relayEnterArea">
      <div class="bacArea" v-if="relayData.settings.web_banner">
        <img class="titleImg" :src="relayData.settings.web_banner" alt="">

      </div>
      <div class="title" v-html="relayData.activity_rules">
      </div>
      <div class="join">
        {{joinText}}
      </div>
      <div class="enterButtonArea">
        <image class="enterButton" @click="goNext('view')" :mode="'aspectFit'" :src="relayData.settings.enter_button" alt=""></image>
      </div>

      <div class="companyInfo" v-html="relayData.business_intro">
        <!--      <div class="companyGuide">指导单位：化龙巷</div>
              <div class="companyName">主办单位：千帆网络科技有限公司</div>-->
      </div>
      <guide></guide>
    </div>
  </div>
<!--  <div class="relayEnterArea" :style="{background:'url('+relayData.settings.banner+') no-repeat center center/cover'}">-->

</template>

<script>
import {mapState} from "vuex";
import {timeStampToString,strChange} from '@/until/tool'
import {LoginApp,checkLogin,isWeiXin,isQianfan,checkPlatform,shareFun,setShare,newJumpUrl} from '@/until/QFH5.js'
import {getIfCanRelay} from '@/api/api.js'
export default {
  name: "relay",
  data() {
    return {
      start_time:'',
      joinMember: 10000,
      joinText:''
    }
  },
  computed:{
    ...mapState({
      basicData: state => state.basicData,
      guide:state => state.guide
    })
  },
  props:{
    actid:{
      type:Number,
      default:0,
    },
    relayData:{
      type:Object,
      default: {}
    },
    basicData:{
      type:Object,
      default: {}
    }
  },
  methods: {
    arrangeNum() {
      console.info(this.relayData.settings)
      this.joinText = strChange(this.relayData.settings.index_play_num,this.basicData.play_num)
	  
	  let token = localStorage.getItem(this.actid+'bearerToken') || null
	  if(token!=null && this.$store.state.long==0 && this.$store.state.lat==0  &&this.relayData.area && this.relayData.area.type==3){
	  	this.$store.dispatch('getPos')
	  	window.getLocationCallBackFun=()=>{}
	  }
    },
    login(){
      if(this.checkPlat()){
        LoginApp(this.actid)
      }
    },
    //检查平台
    checkPlat(){
      let plat = checkPlatform()
      if(!plat){
        this.$store.dispatch('setGuideShow',4)
      }
      return plat
    },
    async goNext(type){
      let timeNow = parseInt(new Date().getTime() / 1000)
      if(timeNow < this.relayData.start_time){
        uni.showToast({ title:'活动还未开始', icon:'none' })
        return;
      }else if(timeNow > this.relayData.expire_time){
        uni.showToast({ title:'活动已结束', icon:'none' })
        return;
      }else{
        console.info("1111111")
        getIfCanRelay({actid: this.actid}).then(res=>{
          console.info(res)
          if(this.relayData.settings.play_many_times){
            if(this.relayData.settings.open_theme){
              let callback=()=>{
                this.$emit('stepChange',type)
              }
              this.getAuth(callback,null,true)
            }else{
              let callback=()=>{
                this.$emit('stepChange','sign')
              }
              this.getAuth(callback,null,true)
            }
          }else{
            if(res.data.user_play_num > 0){
              uni.showToast({ title:'您已参与过本次活动', icon:'none' })
              return;
            }else{
              if(this.relayData.settings.open_theme){
                let callback=()=>{
                  this.$emit('stepChange',type)
                }
                this.getAuth(callback,null,true)
              }else{
                let callback=()=>{
                  this.$emit('stepChange','sign')
                }
                this.getAuth(callback,null,true)
              }
            }

          }
        })



      }


    },
    //所有前置条件
    async getAuth(callback=()=>{},isNeglect=false){
      let {isWechat,phone} = this.guide
      if(this.checkPlat()){
        let loginStatus = await checkLogin()
        console.info('loginStatus=',loginStatus)
        if(!loginStatus){
          this.login()
          return
        }

        console.info('isQianfan=',isQianfan())
        if(isQianfan()){
          if(!isWechat){
            this.$store.dispatch('setGuideShow',1)
            return
          }
          if(phone==""){
            this.$store.dispatch('setGuideShow',2)
            return
          }
          callback()
        }else{
          callback()
        }
      }
    },
  },
  mounted() {
    this.arrangeNum()


  }
}
</script>

<style scoped lang="scss">
@import 'scss/relay.scss';
body {
  /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.relayEnterArea {
  height: 100vh;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.bacArea {
  position: relative;
  width: 100%;
  height: 350rpx;
  margin: 85rpx auto 0 auto;

  .titleImg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 88;
    animation: fadenum 5s;
    left: 50%;
    transform: translate(-50%, 0%) scale(1);
  }

  @keyframes fadenum {
    0% {
      left: 50%;
      transform: translate(-50%, 0%) scale(0);
    }
    100% {
      left: 50%;
      transform: translate(-50%, 0%) scale(1);
    }
  }

}

.title {
  position: absolute;
  left: 30rpx;
  top: 479rpx;
  width: 700rpx;
  // margin: 30rpx auto;
  font-size: 42rpx;
  font-weight: 800;
  color: #FFF195;
  text-align: center;
  line-height: 74rpx;
  letter-spacing: 2rpx;
}

.join {
  width: 100%;
  text-align: center;
  /*margin: 70rpx auto 0 auto;*/
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 45rpx;
  position: absolute;
  left: 50%;
  top: 697rpx;
  transform: translate(-50%, 0%);
}
.companyInfo{
  min-width: 510rpx;
  position: absolute;
  bottom: 115rpx;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: 26rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFF387;
  letter-spacing: 2rpx;
  .companyGuide,.companyName{
    height: 50rpx;
  }
}
.enterButtonArea{
  position: absolute;
  left: 50%;
  top: 773rpx;
  transform: translate(-50%, 0%);
}
.enterButton{
  /*margin: 30rpx auto 0 auto;*/
  cursor: pointer;
  animation: jelly 1s infinite;
  display: flex;
  max-height: 174rpx;
  max-width: 374rpx;

}

</style>